<template>
    <div>
        <!-- 列表详情页 -->
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :immediate-check="false" offset="4">
            <van-cell v-for="item in datalist" :key="item.filmId" @click="handleClick(item.filmId)">
                <!-- {{ item.name }} -->
                <Film :data="item"></Film>
            </van-cell>
        </van-list>
    </div>
</template>


<script setup>
import axios from 'axios'
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import Film from './Film.vue'
import { List as vanList, Cell as vanCell } from 'vant';
const router = useRouter()
const datalist = ref([])

const loading = ref(false) //加载状态
const finished = ref(false)//结束状态
const pageNumber = ref(1)
const total = ref(0)  //所有数据的长度
const onLoad = async () => {
    console.log('到底了')
    if (total.value === datalist.value.length) {
        finished.value = true
        return
    }

    pageNumber.value++
    const res = await axios({
        url: `https://m.maizuo.com/gateway?cityId=110100&pageNum=${pageNumber.value}&pageSize=10&type=1&k=7309027`,
        headers: {
            'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.1","e":"17089542072373175589470209","bc":"110100"}',
            'X-Host': 'mall.film-ticket.film.list',
        }
    })
    // datalist.value = datalist.value.concat(res.data.data.films)
    datalist.value = [...(datalist.value), ...(res.data.data.films)]
    loading.value = false
}
onMounted(async () => {
    const res = await axios({
        url: `https://m.maizuo.com/gateway?cityId=110100&pageNum=${pageNumber.value}&pageSize=10&type=1&k=7309027`,
        headers: {
            'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.1","e":"17089542072373175589470209","bc":"110100"}',
            'X-Host': 'mall.film-ticket.film.list',
        }
    })
    total.value = res.data.data.total
    datalist.value = res.data.data.films
})

const handleClick = (id) => {
    
    router.push({
        name: 'detail',
        params: {
            myid: id
        }
    })
}
</script >


<style scoped lang="scss">
.van-list{
    padding-bottom: 10vw;
}
</style>